(function() {
	// 下拉框
	var sUl = $('.select-disabled');
	var sBtn = $('.select-r');
	var sVal = $('.select-l');
	var isClick = true;
	var sLi = $('.select-disabled li');
	var level1Btn = $('.level1-btn');
	var level2Btn = $('.level2-btn')
	var level1Val = $('.level1-val')
	var level2Val = $('.level2-val')
	// level1.on('click',function(){
	// 	alert(5)
	// })
	level2Btn.addClass('disclick');
	function level1Changes(){
		level2Btn.removeClass('disclick');
	}
	function level2Changes(){
		level2Btn.addClass('disclick');
	}
	level1Val.bind("DOMNodeInserted", level1Changes);
	level2Val.bind("DOMNodeInserted", level2Changes);
	sBtn.click(function() {
		event.stopPropagation();
		if (isClick) {
			sBtn.next('.select-disabled').css('display', 'none');
			$(this).next('.select-disabled').css('display', 'block');
			isClick = false;
		} else {	
			$(this).next('.select-disabled').css('display', 'none');
			isClick = true;
		}
		// if(sUl.css('display')== 'block'){
		// 	isClick = false;
		// }
	});
	sLi.on('mouseover', changeColor);
	sLi.on('click', changeVal);

	function changeVal() {
		event.stopPropagation();
		$(this).parent().siblings('.select-l').text($(this).text());
		$(this).parent().css('display', 'none');
		isClick = true;
	}

	function changeColor() {
		sLi.css('background', '#E9FBDB');
		$(this).css('background', '#35d6c0');
	}
	$(document).on('click', function() {
		sUl.css('display', 'none');
		isClick = true;
	})
	/* 模态框 */
	var createPic = $('.pic-create');
	var modelBox = $('.modelBox');
	var insideBox = modelBox.children('.insideBox');
	
	createPic.on('click',function(){
		var BODY = $('body')
		var defaultViewWidth = insideBox.css('width');
		var defaultViewHeight = insideBox.css('height');
		var closeBtn = modelBox.find('.create-close');
		var selectedLevel1 = $('.inform .level1-val');
		var selectedLevel2 = $('.inform .level2-val');
		var disAlbum = $('.discribe-album');
		var selectGrade;
		var selectClass;
		// var viewIsShow = function viewIsShow() {
		//     return modelBox.is(':visible');
		// };
		//lock body
		var lockBody = function lockBody() {
		    return BODY.css('overflow', 'hidden');
		};
		//unlock body
		var unlockBody = function unlockBody() {
		    return BODY.css('overflow', 'auto');
		};
		//show view
		var showView = function showView() {
		    modelBox.show();
		    lockBody();
		};
		//hide view
		var hideView = function hideView() {
			selectGrade = selectedLevel1.text();
			selectClass = selectedLevel2.text();
			disAlbumVal = disAlbum.val();
		    modelBox.hide();
		    insideBox.css({ 'width': defaultViewWidth, 'height': defaultViewHeight });
		    unlockBody();
			// 重置样式
			selectedLevel1.text('年级');
			selectedLevel2.text('班级');
			disAlbum.val('');
			imgName.text('你还没有选择任何图片..');
		};
		var form = $('.inform');
		
		var f1 = $('#f1');
		var f2 = $('#f2');
		var imgName = $('.img-name');
		var imgArr = new Array();
		var files;
		var imgSet = [];
		var imgGet = [];
		var albumTerm;
		var imgTerm;
		var src;
		var iKonw = $('.Ikonw')
		var yes = $('.control-yes');
		var no = $('.control-no');
		var level1Changes = false;
		var level2Changes = false;
		var imgChose = false;
		var Tips = $('.insideTips');
		var tipsInformation = $('.tipsInformation');
		f2.unbind('click').on('click', function() {
			f1.trigger('click');
		});
		f1.unbind('click').on('change', function() {
			var Name = '';
			files = event.target.files;
			$.each(files, function(i, v) {
				Name = Name + files[i].name + ',';
				imgName.text(Name);
			})
		});
		var showCreatePic = function showCreatePic(){
			/* 创建相册 */
				
				$.each(files, function(i) {
					var f1Reader = new FileReader();
					f1Reader.readAsDataURL(files[i]);
					f1Reader.onloadend =function() {	
						src = event.target.result;
						imgSet.push(src);
						if(imgSet.length == files.length){
								rendering(imgSet,selectGrade,selectClass,disAlbumVal);
						}
					}	
				})
		}
		var showTips = function showTips(){
			Tips.show();
			insideBox.hide();	
		}
		var hideTips = function hideTips(){
			Tips.hide();
			insideBox.show();
		}
		iKonw.on('click',hideTips)
		showView();
		closeBtn.on('click', hideView);
		imgName.bind("DOMNodeInserted",function(){
				return imgChose = true;
		})
		selectedLevel1.bind("DOMNodeInserted", function(){
				 return level1Changes = true;
		});
		selectedLevel2.bind("DOMNodeInserted", function(){
				 return level2Changes = true;
		});
		yes.unbind('click').on('click', function(){
			 if(!level1Changes){
				 showTips();
				 tipsInformation.text('请选择年级!');
				 
			 }else if(!level2Changes){
				 showTips();
				 tipsInformation.text('请选择班级!');
				 
			 }else if(!imgChose){
				 showTips();
				 tipsInformation.text('请上传照片!');
			 }else if(level1Changes&&level2Changes&&imgChose){
				 hideView();
				 showCreatePic();
			 }
			 
			 
		 })
		 no.unbind('click').on('click',hideView)
		  
	})	
	var albumArr = JSON.parse(localStorage.getItem('albumArr')) || [{
		imgterm: ['../images/album/photo1.jpg','../images/album/photo2.jpg','../images/album/photo3.jpg'],
		subordinate: '大班-一班',
		discribe: '这是一个有趣的相册！！！'
	},
	{
		imgterm: ['../images/album/photo4.jpg','../images/album/photo2.jpg','../images/album/photo3.jpg'],
		subordinate: '大班-二班',
		discribe: '这是一个有趣的相册！！！'
	},
	{
		imgterm: ['../images/album/photo5.jpg','../images/album/photo2.jpg','../images/album/photo3.jpg'],
		subordinate: '中班-一班',
		discribe: '这是一个有趣的相册！！！'
	},
	{
		imgterm: ['../images/album/photo6.jpg','../images/album/photo2.jpg','../images/album/photo3.jpg',
				'../images/album/photo6.jpg','../images/album/photo2.jpg','../images/album/photo3.jpg',
				'../images/album/photo6.jpg','../images/album/photo2.jpg','../images/album/photo3.jpg',
				'../images/album/photo6.jpg','../images/album/photo2.jpg','../images/album/photo3.jpg'
		],
		subordinate: '小班-一班',
		discribe: '这是一个有趣的相册！！！'
	}
	];
	localStorage.setItem('albumArr',JSON.stringify(albumArr));
	// <img src="../images/album/photo1.jpg" >
		
			
	var n;//页数 
	if(albumArr.length){
		$('.pic-page').show()
		n = Math.ceil(albumArr.length / 4);
	}else{
		$('.pic-page').hide()
	}
	var showNum = $('.show-num');
	var prevBtn = $('.span-prev');
	var nextBtn = $('.span-next');
	var num = 1;
	var paging = function paging(number,arr,maxPage){
		showNum.on('click','span',function(){
			number = parseInt($(this).text());
			changePage(number,arr);
		})
		prevBtn.unbind('click').on('click',function(){
			number --;	
			if(number <= 1){
				number = 1;
			}
			changePage(number,arr);
		});
		nextBtn.unbind('click').on('click',function(){
			number ++;
			if(number >= maxPage){
				number = maxPage;
			}
			changePage(number,arr,n);
		});
	}
	
	var resetPage = function resetPage(){
		$.each(album,function(i,v){
			$(album[i]).html('');
		});
	}
	var resetPagination = function resetPagination(){
		showNum.html('');
	}
	var changePage = function changePage(numf,arr){
		var spanPage = $('.show-num span')
		spanPage.removeClass('span-active');
		spanPage.eq(numf-1).addClass('span-active');		
		resetPage();
		if(arr != null){
			if(4*numf <= arr.length){
				for(var i = (numf - 1) * 4;i < 4 * numf; i ++){	
				$(album[i%4]).append(
				'<a href="albumDetails.html?'+i+'" class="picture-box">'+
					'<img src="'+arr[i].imgterm[0]+'" alt="" class="img-responsive album-img center-block">'+
				'</a>'+
				'<p class="album-dis">'+arr[i].subordinate+'</p> ');	
				}
			}else{
				for(var i = (numf - 1) * 4;i < arr.length; i ++){
					$(album[i%4]).append(
					'<a href="albumDetails.html?'+i+'"class="picture-box">'+
						'<img src="'+arr[i].imgterm[0]+'" alt="" class="img-responsive album-img center-block">'+
					'</a>'+
					'<p class="album-dis">'+arr[i].subordinate+'</p>');
				}
			}		
		}
	}
	
	var showPage = function showPage(arr,pagination){
		resetPage();
		resetPagination();
		$.each(arr,function(i,v){			
			if(arr != null){
				$(album[i]).append(
				'<a href="albumDetails.html?'+i+'" class="picture-box">'+
					'<img src="'+arr[i].imgterm[0]+'" alt="" class="img-responsive album-img center-block">'+
				'</a>'+
				'<p class="album-dis">'+arr[i].subordinate+'</p> ');
			}	
		});
		var Span = $('.pic-page span');
		if(Span.length - 2 < pagination){
			for(var i = 0; i < pagination; i ++){
				var Nspan = $(
					'<span>'+(i-0+1)+'</span>'
				)
				showNum.append(Nspan);
				if(i == 0){
					Nspan.addClass('span-active');
				}	
			}
		}
	}
	var album = $('.album');
	var rendering = function rendering(imga,selectG,selectC,picDiscribe){
		// imgGet = JSON.parse(localStorage.getItem('imgSet'));
		// process.css('display','block');
		$('.pic-page').show()
		albumTerm = {
					imgterm: imga,
					subordinate: selectG +'-'+selectC,
					discribe: picDiscribe
				}	
		albumArr.unshift(albumTerm);
		localStorage.setItem('albumArr',JSON.stringify(albumArr));
		n = Math.ceil(albumArr.length / 4);
		resetPage();
		showPage(albumArr,n)
		paging(num,albumArr,n)
	}
	var gcArr = [];
	$.each(albumArr,function(i,v){
		gcArr.push(albumArr[i].subordinate.split('-'));
	});
	function searchAlbum(albumGrade,albumClass){
		var searchArr = [];
		if(albumClass != '班级'){
			for(var i = 0; i < albumArr.length; i ++){
				if(albumArr[i].subordinate.split('-')[0] == albumGrade && albumArr[i].subordinate.split('-')[1] == albumClass){
					searchArr.push(i);
				}
			}
			return searchArr;
		}else{
			for(var i = 0; i < albumArr.length; i ++){
				if(albumArr[i].subordinate.split('-')[0] == albumGrade){
					searchArr.push(i);
				}
			}
			return searchArr;
		}					
	}
	var searchBtn = $('.btn-search');
	var searchGrade = $('.pic-search .level1-val');
	var searchClass = $('.pic-search .level2-val');
	var gradeChanges = false;
	var classChanges = false;
	var returnSearch = $('.search-return')
	var searchBox = $('.pic-search')
	searchGrade.bind("DOMNodeInserted", function(){
		gradeChanges = true;
	});
	searchClass.bind("DOMNodeInserted", function(){
		classChanges = true;
	});
	returnSearch.on('click',function(){
		returnSearch.hide();
		searchBox.show();
		showPage(albumArr,n);
		createPic.show();
		searchGrade.text('年级');
		searchClass.text('班级'); 
		gradeChanges = false;
		classChanges = false;
		paging(num,albumArr,n)
	})
	var searchShow = function searchShow(indexArr,pagination){
		resetPage();
		resetPagination();
		var nowImgArr = [];
		$.each(indexArr,function(i,v){			
			if(indexArr != null){
				$(album[i]).append(
				'<a href="albumDetails.html?'+indexArr[i]+'" class="picture-box">'+
					'<img src="'+albumArr[indexArr[i]].imgterm[0]+'" alt="" class="img-responsive album-img center-block">'+
				'</a>'+
				'<p class="album-dis">'+albumArr[indexArr[i]].subordinate+'</p> ');
			}	
			nowImgArr.push(albumArr[indexArr[i]]);
		});
		
		var Span = $('.pic-page span');
		if(Span.length - 2 < pagination){
			for(var i = 0; i < pagination; i ++){
				var Nspan = $(
					'<span>'+(i-0+1)+'</span>'
				)
				showNum.append(Nspan);
				if(i == 0){
					Nspan.addClass('span-active');
				}	
			}
		}
		paging(1,nowImgArr,pagination);
	}
	searchBtn.on('click',function(){	
		var searchWaring = $('.search-warning');
		var warningInside = $('.waring-side');
		var closeWarning = $('.close-warning');
		var swInformation = $('.sw-information');
		swInformation.html('');
		var nowArr = searchAlbum(searchGrade.text(),searchClass.text());
		closeWarning.on('click',function(){
			searchWaring.hide();
			searchGrade.text('年级');
			searchClass.text('班级'); 
			gradeChanges = false;
			classChanges = false;
		})
		if(gradeChanges || classChanges){
			if(nowArr.length){
				var nowPage = Math.ceil(nowArr.length / 4);
				searchShow(nowArr,nowPage);
				returnSearch.show();
				searchBox.hide();
				createPic.hide();
				
			}else{
				searchWaring.show();
				warningInside.show();
				if(classChanges){
					swInformation.append('没有'+searchGrade.text()+searchClass.text()+'的相册');
				}else{
					swInformation.append('没有'+searchGrade.text()+'的相册');
				}
				
			}
		}else{
			searchWaring.show();
			warningInside.show();
			swInformation.append('请选择你要搜索的年级');
		}
		
		
		
	})
	$(function (){
		showPage(albumArr,n);
		paging(num,albumArr,n);
		// 滚动条样式
		$(".mCustomScrollbar").mCustomScrollbar({
			theme: "minimal-dark"
		});
	})	
})();
// if(JSON.parse(localStorage.getItem('imgSet')) != null){
// 		imgGet = JSON.parse(localStorage.getItem('imgSet'));
// 	}